<template> 
  <div class="app-container">
    <el-card class="operate-container" shadow="never">

      <i class="el-icon-tickets" style="margin-top: 5px"></i>
      <span style="margin-top: 5px">规格值列表</span>
      <el-button
        class="btn-add"
        @click="addProductAttr()"
        size="mini">
        添加
      </el-button>

      <el-button
        class="btn-add"
        :disabled="multipleSelection.length<1"
        size="mini"
        type="danger"
        @click="multiDelete">
              批量删除
      </el-button>

    </el-card>
    <div class="table-container">
      <el-table ref="productAttrTable"
                :data="list"
                style="width: 100%"
                @selection-change="handleSelectionChange"
                
                border>
        <el-table-column type="selection" width="60" align="center"></el-table-column>
        <el-table-column label="编号" width="100" align="center">
          <template slot-scope="scope">{{scope.row.stid}}</template>
        </el-table-column>
        <el-table-column label="属性值名称" align="center">
          <template slot-scope="scope">{{scope.row.slrlm}}</template>
        </el-table-column>
        <el-table-column label="商品类型" align="center">
          <template>{{$route.query.name}}</template>
        </el-table-column>
         <el-table-column label="分类图标" width="200" align="center">
          <template slot-scope="scope"><img style="height: 80px;width:80px;" :src="scope.row.stanpicture?imgUrl+'/image/'+scope.row.stanpicture.spname:''"></template>
        </el-table-column>
        <!-- <el-table-column label="属性是否可选" width="120" align="center">
          <template slot-scope="scope">{{scope.row.selectType|selectTypeFilter}}</template>
        </el-table-column>
        <el-table-column label="属性值的录入方式" width="150" align="center">
          <template slot-scope="scope">{{scope.row.inputType|inputTypeFilter}}</template>
        </el-table-column>
        <el-table-column label="可选值列表" align="center">
          <template slot-scope="scope">{{scope.row.inputList}}</template>
        </el-table-column>
        <el-table-column label="排序" width="100" align="center">  
          <template slot-scope="scope">{{scope.row.sort}}</template>
        </el-table-column> -->
        <el-table-column label="操作" width="300" align="center">
          <template slot-scope="scope">
             <el-button
              size="mini"
              @click="updateImg(scope.row)">设置图片
            </el-button>
            <el-button
              size="mini"
              @click="handleUpdate(scope.row)">编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
   
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="listQuery.pagesize"
        :page-sizes="[5,10,15]"
        :current-page.sync="listQuery.page"
        :total="total">
      </el-pagination>
    </div>
 <el-dialog
      title="设置图片"
      :visible.sync="imgVisible"
      @close="dialogClose"
      width="50%">
      <el-form  label-width="120px" >
     
  <!-- 图片 -->
        <el-form-item label="图标" prop="sname"  >

            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              ref="upload"
              :on-preview="handlePictureCardPreview"
              :before-upload="beforeUpload"
              :on-change="handleChange"
              :auto-upload="false"
              :limit="limitCount"
              :file-list="imgFile"
              :on-remove="handleRemove"
             
              :class="{hide:hideUpload}">
              <i class="el-icon-plus"></i>
            </el-upload>

            <el-dialog :visible.sync="dialogShow">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>

        </el-form-item>

  <!-- 图片完 -->
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="imgVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleImg()" >确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="30%">
      <el-form ref="productAttrKey" :model="productAttrKey" :rules="rules" label-width="120px">
        <el-form-item label="规格值" prop="sname">
          <el-input v-model="productAttrKey.slrlm" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm('productAttrKey')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import {getListKey as fetchList, deleteKey, updateKey,createkey,updateSpeImg } from '@/api/productAttr'

  export default {
    name: 'productAttrList',
    data() {
      return {
        list: null,
        total: null,
        limitCount:1,
        hideUpload: false,
        imgUrl:'',
        dialogImageUrl: '',
        imgFile:[],
        dialogVisible:false,
        isClientCertFile:true,
        dialogShow:false,
        imgVisible:false,

        dialogTitle:'',
        productAttrKey:{
          sid: this.$route.query.sid,
          stid:null,
          slrlm:'',

        },
        listQuery: {
          page: 1,
          pagesize: 10,
          sid: this.$route.query.sid
        },
        operateType: null,
        multipleSelection: [],
        rules: {
          slrlm: [
            { required: true, message: '请输入规格名称', trigger: 'blur' }
            
          ]
        },
        operates: [
          {
            label: "删除",
            value: "deleteProductAttr"
          }
        ]
      }
    },
    created() {
      console.log(this.listQuery);
      process.env.NODE_ENV === 'development' ? this.imgUrl = '/api/' : this.imgUrl = process.env.API_ROOT ;

      this.getList();
    },
    methods: {
      getList() {
        fetchList(this.listQuery).then(response => {
          this.list = response.obj.list;
          this.total = response.obj.count;
        });

      },
      // 预览图片
      handlePictureCardPreview(file) {
        // alert(file.url);
        this.dialogImageUrl = file.url;
        this.dialogShow = true;
      },

      // 下载图片
      handleDownload(file) {
        console.log(file);
      },

       //值改变 判读是否有值
      handleChange(file, fileList, name) {
        console.log(this.imgFile);
        this.hideUpload = fileList.length >= this.limitCount;
        this.imgFile["file"] = fileList;
        if (typeof this.imgFile.file != "undefined" && this.imgFile.file.length > 0) {
          this.isClientCertFile = false;
        } else {
          this.isClientCertFile = true;
        }
      },

      //值被清空 
      handleRemove(file, fileList, name) {
        this.hideUpload = fileList.length >= this.limitCount;
        this.isClientCertFile = true;
      },

      dialogClose(){
        this.imgFile=[];
      },

      // 上传图片
      beforeUpload(file){
        this.$refs.upload.clearFiles();
        console.log(file);
        let _this = this;
          let param = new FormData()  // 创建form对象
          param.append('file', file, file.name)  // file对象是 beforeUpload参数
            param.append('stid',_this.productAttrKey.stid);
              updateSpeImg(param).then(res=>{
              console.log(res);
              _this.$message({
                  message: '上传成功',
                  type: 'success',
                  duration:1000
                });
                _this.imgVisible = false;
                _this.getList();
            })


            return false
      },


      // 点击设置图片按钮
      updateImg(row){
        console.log(row);
        this.imgVisible = true;
        this.productAttrKey.stid = row.stid;

      },
      addProductAttr() {
        this.dialogVisible = true;
        this.dialogTitle = "添加规格值";
        this.productAttrKey=Object.assign({},{sid: this.$route.query.sid,slrlm:''})
        // this.$router.push({path:'/pms/addProductAttr',query:{cid:this.$route.query.cid,type:this.$route.query.type}});
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
     
      handleSizeChange(val) {
        this.listQuery.page = 1;
        this.listQuery.pagesize = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      },
      handleUpdate(row) {
        this.dialogVisible = true;
        this.dialogTitle = "编辑规格值";
        this.productAttrKey.slrlm = row.slrlm; 
        this.productAttrKey.stid = row.stid;
      },
       handleImg(){
          if (this.isClientCertFile) {
              this.$message.error("请选择图片作为分类图标")
              return
            }
          console.log(this.$refs.upload);
          this.$refs.upload.submit();

      
      },
      handleConfirm(formName){
        this.$refs[formName].validate((valid) => {
          console.log(valid);
          if (valid) {
            if(this.dialogTitle==="添加规格值"){
             
              createkey(this.productAttrKey).then(res=>{
                this.$message({
                  message: '添加成功',
                  type: 'success',
                  duration:1000
                });
                this.dialogVisible = false;
                this.getList();

              })
            
            }else{
              let data =this.productAttrKey;
              console.log(data);
              updateKey(data).then(response=>{
                this.$message({
                  message: '修改成功',
                  type: 'success',
                  duration:1000
                });
                this.dialogVisible = false;
                this.getList();
              });
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      // 批量删除规格
      multiDelete(){
        let list = this.multipleSelection;
        let data=list.map((res)=>{
          return res.stid
        })
        this.$confirm(`是否批量删除选中的${data.length}个规格`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteKey({array:data}).then(response => {
            this.$message({
              message: '删除成功',
              type: 'success',
              duration: 1000
            });
            this.getList();
          });
        });
      },
     
      handleDelete(row) {
        this.$confirm('是否要删除该规格', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteKey({array:[row.stid]}).then(response=>{
            this.$message({
              message: '删除成功',
              type: 'success',
              duration:1000
            });
            this.getList();
          });
        });
      },
    },
     
    
    filters: {
      inputTypeFilter(value) {
        if (value === 1) {
          return '从列表中选取';
        } else {
          return '手工录入'
        }
      },
      selectTypeFilter(value) {
        if (value === 1) {
          return '单选';
        } else if (value === 2) {
          return '多选';
        } else {
          return '唯一'
        }
      },
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>


